<template>
  <div class="contanier">
    <div class="contanier-title">资料管理</div>
    <search-form>
      <template v-slot:formLeft>
        <el-form :inline="true" :model="userFormLine" class="demo-form-inline">
          <el-row>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="资料名称" label-width="80px">
                  <el-input v-model="userFormLine.name" placeholder="请输入资料名称"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple-light">
                <el-form-item label="开放权限" label-width="80px">
                  <el-select v-model="userFormLine.scopeRoles" clearable label-width="80px" placeholder="请选择开放权限">
                    <el-option v-for="(item, index) in examScopeOptions" :id="item.id" :key="index"
                      :disabled="item.disabled" :label="item.fullName" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template v-slot:formRight>
        <div class="formRight-btn">
          <el-button class="overPosBtn" icon="el-icon-refresh" @click="resetForm" style="width: 104px;">重 置
          </el-button>
          <el-button class="set-col-btn" icon="el-icon-search" type="primary" @click="onsearchForm" style="width: 104px;">查 询
          </el-button>
        </div>
      </template>
    </search-form>
    <div>
      <search-table>
        <template v-slot:daochu>
          <div class="set-table-right">
            <el-button @click="addData">
              <img src="@/assets/icon03.png" style="width: 20px; vertical-align: sub;">
              新增资料
            </el-button>
          </div>
        </template>
        <template v-slot:biaoge>
          <template>
            <el-table :data="tableData" class="table-top" style="width: 100%">
              <el-table-column align="center" label="序号" type="index" width="80">
                <template slot-scope="scope">{{pageSize * (currentPage - 1) +  scope.$index + 1 }}</template>
              </el-table-column>
              <el-table-column label="资料名称">
                <template slot-scope="scope">{{ scope.row.name }}</template>
              </el-table-column>
              <el-table-column label="关联自测试题名称" prop="homeExamName">
              </el-table-column>
              <el-table-column label="开放权限" prop="scopeRoleNames">
                <!-- <template slot-scope="scope">{{
                    getDictLabel(scope.row.scopeType, examScopeOptions)
                  }}
                </template> -->
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="180">
                <template slot-scope="scope">
                  <el-button class="set-table-btn set-table-btn-col" icon="el-icon-edit" size="small" type="text"
                    @click.native.prevent="editRow(scope.row)">
                    编辑
                  </el-button>
                  <el-button class="set-table-btn set-table-btn-col2" icon="el-icon-delete" size="small" type="text"
                    @click="delRow(scope.row)">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </template>
        <template v-slot:fenye>
          <div class="set-table-pg-right">
            <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
              @size-change="handleSizeChange" :total="total" layout="total, sizes, prev, pager, next, jumper"
              @current-change="handleCurrentChange">
            </el-pagination>
          </div>
        </template>
      </search-table>
    </div>
    <el-dialog :visible.sync="showTest" title="提示" width="30%">
      <div class="tip">
        <div class="header">
          <div class="dia-txt">是否确认删除？</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showTest = false">取消</el-button>
        <el-button type="primary" @click="showTest = false">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import SearchForm from "@/components/search-form";
import SearchTable from "@/components/search-table";
import { deleteList, getList } from "@/api/dataCenter/dataCenterApi";
import { getDictLabel } from "@/utils";
import request from '@/utils/request'
export default {
  name: "UserManagement",
  components: {
    SearchForm,
    SearchTable,
  },
  data() {
    return {
      showTest: false,
      userFormLine: {
        name: "",
        sex: "",
        unit: "",
        xz: "",
        ssxmc: "",
        js: "",
        zt: "",
        scopeRoles: ''
      },
      tableData: [],
      multipleSelection: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      examScopeOptions: [
        {
          "id": "668834371960045637",
          "fullName": "培训考试用户",
          "enCode": "0004",
          "type": "全局",
          "organizeInfo": null,
          "description": "",
          "enabledMark": 1,
          "creatorTime": 1741598943000,
          "sortCode": 0,
          "roleType": "业务角色"
        },
        {
            "id": "669460031602688197",
            "fullName": "大众用户",
            "enCode": "04",
            "type": "全局",
            "organizeInfo": null,
            "description": "",
            "enabledMark": 1,
            "creatorTime": 1741748112000,
            "sortCode": 0,
            "roleType": "业务角色"
        }
      ],
    };
  },
  created() {
    this.loadData();
    // request({
    //   url: `api/permission/Role?n=1743175635&organizeId=0&keyword=&currentPage=1&pageSize=20&sort=desc&sidx=&typeList=ApplicationRole&menuId=07029F61-993A-4A46-BF56-20DE382F4F66`,
    //   method: 'get'
    // })
    //   .then(res => {
    //     this.examScopeOptions = res.data.list
    //   })
  },
  methods: {
    getDictLabel,
    resetForm() {
      this.currentPage = 1;
      this.userFormLine = {
        name: "",
        sex: "",
        unit: "",
        xz: "",
        ssxmc: "",
        js: "",
        zt: "",
        scopeRoles: ''
      };
      this.loadData();
    },
    onsearchForm() {
      this.currentPage = 1;
      this.loadData();
    },
    loadData() {
      const params = {
        ...this.userFormLine,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      };
      getList(params)
        .then((res) => {
          this.tableData = res.data.list;
          this.total = res.data.pagination.total
        })
        .catch((e) => {
          console.log(e);
        });
    },
    editRow(row) {
      this.$router.push({ path: "/dataCenterCreate/index", query: { id: row.id } });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.currentPage = 1
      this.loadData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.loadData()
    },
    addData() {
      this.$router.push("/dataCenterCreate/index");
    },
    delRow(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        type: "warning",
      }).then(() => {
        deleteList(row.id).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.onsearchForm()
        })
      })
    },
  },
};
</script>
<style lang="scss" scoped>
.dia-txt {
  text-align: center;
  font-size: 27px;
  color: #323232;
}

.header {
  height: 200px;
  line-height: 200px;
}
</style>
